﻿@model  CourseViewModel
@{
    ViewData["Title"] = "课程";

}

<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">课程信息</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">课程信息</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row hsm">
        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-primary">
                            <i class="mdi mdi-text-subject font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">@Model.TotalAllCourseCount</span></h3>
                            <p class="text-muted mb-1 text-truncate">全部课程</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-success">
                            <i class="fe-check-circle font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">@Model.TotalAllPublishedCourseCount</span></h3>
                            <p class="text-muted mb-1 text-truncate">发布课程</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-danger">
                            <i class="mdi mdi-playlist-remove font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">@Model.TotalAllUnPublishedCourseCount</span></h3>
                            <p class="text-muted mb-1 text-truncate">未发布课程</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-3">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-danger">
                            <i class="mdi mdi-playlist-remove font-22 avatar-title text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1"><span data-plugin="counterup">@Model.TotalAllClosedCourseCount</span></h3>
                            <p class="text-muted mb-1 text-truncate">关闭课程</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card-box">

                <button onclick="javascript:window.location.href='/Course/Add/'" type="button" class="btn btn-primary  waves-effect waves-light float-right ladda-button" data-style="expand-left">
                    新增课程
                </button>
                <h4 class="header-title mb-4">课程管理</h4>

                <div class="table-responsive" data-pattern="priority-columns" data-add-focus-btn="false" data-add-display-all-btn="false" data-add-display-btn="false">
                    <table class="table table-small-font table-striped" id="datatable" style="width:100%">
                        <thead>
                            <tr>
                                <th width="12%" data-priority="1">科目</th>
                                <th width="10%" data-priority="1">课程标题</th>

                                <th data-priority="2">课程附标题</th>
                                <th data-priority="2">教学计划数量</th>
                                <th data-priority="2">课时数量</th>
                                <th data-priority="2">状态</th>
                                <th data-priority="2">创建时间</th>
                                <th data-priority="2">创建者</th>
                                <th width="10%" data-priority="1">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div><!-- end col -->
    </div>
    <!-- end row -->

</div>
<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->
@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/assets/libs/moment/moment.min.js"></script>

    <script>


        var table;

        $(function () {

            table = $('#datatable').DataTable({
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，没有匹配的数据",
                    "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有匹配的数据",
                    "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
                    "sProcessing": "正在加载中...",
                    "sSearch": "全文搜索：",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    }
                },
                language: {
                    paginate:
                        { previous: "<i class='mdi mdi-chevron-left'>", next: "<i class='mdi mdi-chevron-right'>" }
                },
                drawCallback: function () {
                    $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
                      $('.table-responsive').responsiveTable('update');
                },

                "responsive": true,
                "lengthChange": false,
                "searching": true,
                "order": [[6, 'desc']],
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3, 4, 5, 7, 8] }],
                "serverSide": true,
                ajax: {
                    url: '/Course/GetAll',
                    type: 'POST',
                    async: true,
                    //headers: {
                    //    "XSRF-TOKEN": document.querySelector('[name="__RequestVerificationToken"]').value
                    //},
                    data: function (data) {

                        return {
                            param: data
                        };
                    },
                    error: function (jqXHR) {

                        HandleGlobalException(jqXHR);

                    }
                },

                columns: [
                    {
                        title: "科目",
                        data: "Subject",
                        name: "Subject",

                    },
                    {
                        title: "课程标题",
                        data: "Title",
                        name: "Title"
                    },
                    {
                        title: "课程附标题",
                        data: "SubTitle",
                        name: "SubTitle"
                    },
                    {
                        title: "教学计划数量",
                        data: "PlanQty",
                        name: "PlanQty"
                    },
                    {
                        title: "课时数量",
                        render: function (data, type, row) {

                            var count = row['Lessons'].length;

                            return count;
                        }
                    },
                  
                    {
                        title: "状态",
                        data: "Status",
                        name: "Status",
                        render: function (data, type, row) {

                            if (data == 1) {
                                return "<span class='badge badge-success'>正常</span>"
                            }
                            else {
                                return "<span class='badge badge-dark'>未发布</span>"
                            }
                        }
                    },
                    {
                        title: "建立日期",
                        data: "CreatedTime",
                        name: "CreatedTime",
                        render: function (data, type, row) {
                            return window.moment(data).format("YYYY-MM-DD HH:mm:ss");
                        }
                    },
                    {
                        title: "创建者",
                        data: "CreatedBy",
                        name: "CreatedBy"
                    },
                    {
                        title: "操作",
                        data: null,
                        name: null,
                        render: function (data, type, row) {

                            var html = "<div class='btn-group dropdown'>" +
                                "<a href='javascript: void(0);' class='table-action-btn dropdown-toggle arrow-none btn btn-outline-secondary waves-effect btn-sm' data-toggle='dropdown' aria-expanded='false'><i class='ti-menu'></i></a>" +
                                "<div class='dropdown-menu dropdown-menu-left'>" +
                                "<a class='dropdown-item' href='/Course/View/" + row["Id"] + "'><i class='mdi mdi-eye mr-2 text-muted font-18 vertical-middle'></i>查看</a>"+
                                "<a class='dropdown-item' href='/Course/Edit/" + row["Id"] + "'><i class='mdi mdi-pencil mr-2 text-muted font-18 vertical-middle'></i>修改</a>";


                            if (row["Status"] == 1) {
                                html = html + "<a class='dropdown-item' href='#' onclick='Unpublish(\"" + row["Id"] + "\")'><i class='mdi mdi-alpha-u-box  mr-2 text-muted font-18 vertical-middle'></i>撤销发布</a>";
                            } else {
                                html = html + "<a class='dropdown-item' href='#' onclick='Publish(\"" + row["Id"] + "\")'><i class='mdi mdi-alpha-p-box  mr-2 text-muted font-18 vertical-middle'></i>发布</a>";
                            }

                            html = html + "<a class='dropdown-item' href='#' onclick='Remove(\"" + row["Id"] + "\")'><i class='mdi mdi-delete-forever mr-2 text-muted font-18 vertical-middle'></i>删除</a></div></div>";

                            return html;

                        }
                    }

                ]


            });
        });


        function Remove(id) {


            Swal.fire({
                title: "删除",
                text: "确定删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#dd4b39",
                confirmButtonText: "是的，删除!",
                cancelButtonText: "取消",

            }).then(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Course/Delete/' + id,
                    success: function (data) {
                        if (data.success) {
                            ShowMessage(data.message);
                            table.draw();
                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });
            });


        }

        function Publish(id) {

            $.ajax({
                type: 'POST',
                url: '/Course/Publish/' + id,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message);
                        table.draw();
                    } else {
                        ShowMessageError(data.message);
                    }
                } 
            });



        }
        function Unpublish(id) {

            $.ajax({
                type: 'POST',
                url: '/Course/Unpublish/' + id,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message);
                        table.draw();
                    } else {
                        ShowMessageError(data.message);
                    }
                }
            });

        }

    </script>
}
